<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <google-outlined :style="{ fontSize: '28px', color: '#08c' }" />
        <span class="guanli"> 管理后台</span>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <div class="xinjian">
          <!-- <div class="title"></div> -->
          <div class="btn-box">
            <button class="btn">
              <plus-outlined :style="{ fontSize: '18px' }" />
              <span>新建</span>
            </button>
          </div>
        </div>
        <a-menu-item key="1">
          <pie-chart-outlined :style="{ fontSize: '18px' }" />
          <span><router-link to="/staging">工作台</router-link></span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title
            ><user-outlined :style="{ fontSize: '18px' }" />
            <span> 文章管理 </span>
          </template>
          <router-link to="/all/articles"
            ><a-menu-item key="2">所有文章</a-menu-item></router-link
          >
          <router-link to="/classification/management"
            ><a-menu-item key="3">分类管理</a-menu-item></router-link
          >
          <router-link to="/label/management"
            ><a-menu-item key="4">标签管理</a-menu-item></router-link
          >
        </a-sub-menu>
        <a-menu-item key="5">
          <switcher-outlined :style="{ fontSize: '18px' }" />
          <span class="span"
            ><router-link to="/page">页面管理</router-link></span
          >
        </a-menu-item>
        <a-menu-item key="6">
          <wallet-outlined :style="{ fontSize: '18px' }" />
          <span
            ><router-link to="/knowledge/booklet"> 知识小册</router-link></span
          >
        </a-menu-item>
        <a-menu-item key="7">
          <star-outlined :style="{ fontSize: '18px' }" />
          <span><router-link to="/poster">海报管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="8">
          <message-outlined :style="{ fontSize: '18px' }" />
          <span><router-link to="/comment">评论管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="9">
          <loading-outlined :style="{ fontSize: '18px' }" />
          <span><router-link to="/mail">邮件管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="10">
          <smile-outlined :rotate="180" :style="{ fontSize: '18px' }" />
          <span><router-link to="/file/management">文件管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="11">
          <sync-outlined spin :style="{ fontSize: '18px' }" />
          <span><router-link to="/search/secords">搜索记录</router-link></span>
        </a-menu-item>
        <a-menu-item key="12">
          <smile-outlined :style="{ fontSize: '18px' }" />
          <span
            ><router-link to="/access/statistics">访问统计</router-link></span
          >
        </a-menu-item>
        <a-menu-item key="13">
          <setting-filled :style="{ fontSize: '18px' }" />
          <span><router-link to="/user/management">用户管理</router-link></span>
        </a-menu-item>
        <a-menu-item key="14">
          <home-outlined />
          <span><router-link to="/system/settings">系统设置</router-link></span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0 18px">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px'
        }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  StarOutlined,
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
  MessageOutlined,
  WalletOutlined,
  SwitcherOutlined,
  GoogleOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    HomeOutlined,
    SettingFilled,
    SmileOutlined,
    SyncOutlined,
    LoadingOutlined,
    MessageOutlined,
    StarOutlined,
    WalletOutlined,
    SwitcherOutlined,
    GoogleOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PlusOutlined
  },
  setup() {
    return {
      selectedKeys: ref<string[]>(['1']),
      collapsed: ref<boolean>(false)
    }
  }
})
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  width: 50px;
  height: 50px;
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.ant-menu-item a {
  color: #ccc !important;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
.logo {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: red; */
}
.logo img {
  width: 50px;
  height: 50px;
}
.logo h2 {
  margin-top: 10px;
  color: #fff;
}

.btn-box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guanli {
  font-size: 20px;
  color: #fff;
}
.span a:hover {
  color: #000;
}
.btn {
  width: 85%;
  height: 40px;
  background: #0188fb;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .btn span:nth-child(1) {
    font-size: 30px;
    display: block;
    padding: 0 5px;
  }
  .btn span:nth-child(2) {
    font-size: 18px;
  } */
</style>
